<template>
  <footer class="footer">
    <van-tabbar v-model="active"  @change="onChange" active-color="#004198" inactive-color="#000">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="logistics">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </footer>
</template>
<script>
export default {
  data () {
    console.log(this.$route) // 打印当前的地址
    const { path } = this.$route

    let index = 0
    switch (path) {
      case '/home':
        index = 0
        break
      case '/category':
        index = 1
        break
      case '/cart':
        index = 2
        break
      case '/user':
        index = 3
        break
    }
    return {
      active: index // 默认选中的是哪一个，下标从0开始
    }
  },
  methods: { // 自定义事件的聚集地
    onChange (index) {
      console.log(index) // 得到下标志
      let path = ''
      switch (index) {
        case 0:
          path = '/home'
          break
        case 1:
          path = '/category'
          break
        case 2:
          path = '/cart'
          break
        case 3:
          path = '/user'
          break
        default:
          path = '/home'
          break
      }
      // 跳转页面 - 路由栈 - 数组
      this.$router.push(path)
    }
  }
}
</script>
